<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title  class="systemName"></title>
    <base id="base" href="/">
    <link rel="stylesheet" href="css/common/public.css">
    <link rel="stylesheet" href="plugin/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="plugin/ztree/css/zTreeStyle/zTreeStyle.css">
    <link href="plugin/select2/css/select2.min.css" rel="stylesheet">
</head>
<body class="gray-bg" id="contbox">
<div id="app" v-cloak>
    <div class="wrapper wrapper-content animated fadeInRight">
        <!--一行两列布局-->
        <div class="row">
            <!--第一列-->
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>系统资源</h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="ibox-content form-horizontal">
                        <!--zTree菜单树列表-->
                        <ul id="treeMenu" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <!--第二列-->
            <div class="col-sm-10">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>资源列表</h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4 input-group" style="margin-left: 15px;">
                                <input class="form-control" v-model="resourceName" placeholder="请输入资源名称" @keyup.enter="search"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-default btn-outline" @click="search"><i class="fa fa-search"></i>&nbsp;查询</button>
                                </span>
                            </div>
                        </div>
                        <div class="row row-lg">
                            <div class="col-sm-12">
                                <!--toolbar-->
                                <div id="toolbar" class="btn-group">
                                    <!--data-check-permission用于权限校验，如果登录用户的权限不满足，就不显示按钮-->
                                    <button data-check-permission="sys:resource:add" type="button" class="btn btn-outline btn-default" @click="add">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新增
                                    </button>
                                    <button data-check-permission="sys:resource:edit" type="button" class="btn btn-outline btn-default" @click="edit">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                                    </button>
                                    <button data-check-permission="sys:resource:delete" type="button" class="btn btn-outline btn-default" @click="del">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除
                                    </button>
                                    <button  data-check-permission="sys:resource:perm:clear" class="btn btn-outline btn-default" type="button" @click="clearPerm">
                                        <span class="fa fa-remove"></span>&nbsp;清除权限标识
                                    </button>
                                </div>
                                <!--bootstrapTable-->
                                <table id="tbSysMenu"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ibox-content form-horizontal" id="parentTreeDiv" v-show="isShowParentTreeMenu">
        <!--zTree菜单树列表-->
        <ul id="parentTreeMenu" class="ztree"></ul>
    </div>

    <!--菜单编辑-->
    <div class="ibox-content" id="menuCreateOrUpdate" v-show="isShowMenuForm">
        <form class="form-horizontal" id="menuForm">
            <div class="form-group">
                <label class="col-sm-2 control-label">类型：</label>
                <div class="col-sm-10">
                    <select name="type" id="type" class="form-control" style="width: 100%">
                        <option value="1">菜单</option>
                        <option value="2">按钮</option>
                    </select>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group m-t">
                <label class="col-sm-2 control-label">名称：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="name" id="name">
                </div>
                <label class="col-sm-2 control-label">上级菜单：</label>
                <div class="col-sm-4">
                    <div class="input-group m-b">
                        <input type="text" id="parentName" name="parentName" readonly="readonly"   class="form-control">
                        <input type="hidden" id="parentId" name="parentId">
                        <input type="hidden" id="level" name="level">
                        <input type="hidden" id="parentIds" name="parentIds">
                        <input type="hidden" id="parentNames" name="parentNames">
                        <span class="input-group-btn">
                          <button type="button" class="btn btn-primary" title="上级菜单" @click="loadMenuTree">选择</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">权限标识：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="perms" id="perms">
                </div>
                <label class="col-sm-2 control-label">排序：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="orderNum" id="orderNum">
                </div>
            </div>
            <div class="hr-line-dashed" v-show="isShowMenuIconAndUrl"></div>
            <div class="form-group" id="menuIconAndUrl" v-show="isShowMenuIconAndUrl">
                <label class="col-sm-2 control-label">图标：</label>
                <div class="col-sm-4">
                    <div class="input-group m-b">
                        <input type="text" class="form-control" name="icon" id="icon"/>
                        <span class="input-group-btn">
                  <button type="button" class="btn btn-primary" title="图标" @click="showMenuIcon">选择</button>
                </span>
                    </div>
                </div>
                <label class="col-sm-2 control-label">菜单URL：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="url" id="url">
                </div>
            </div>
            <div class="hr-line-dashed" id="hr-line"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注信息：</label>
                <div class="col-sm-10">
              <textarea class="form-control" rows="2" name="remark" id="remark"
                        placeholder="请输入备注消息..." style="margin: 0 -17.675px 0 0; height: 50px; width: 100%;"></textarea>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-4 add-submit">
                    <input type="hidden" class="form-control" name="id" id="id">
                    <button class="btn btn-primary" type="button" @click="save">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<!-- 全局js -->
<script type="text/javascript" src="js/common/public.js"></script>
<!-- Bootstrap table -->
<script src="plugin/bootstrap-table-master/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- ztree -->
<script src="plugin/ztree/jquery.ztree.all.min.js"></script>
<!-- 页面的自定义js -->
<script type='text/javascript' src="plugin/select2/js/select2.min.js"></script>
<script type="text/javascript" src="js/modules/sys/resource.info.js"></script>
</html>